import { Space, Avatar, Badge } from "antd";
import { UserOutlined } from "@ant-design/icons";
const url =
    "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg";
const View = () => {
    return (
        <>
            <h1>Avatar</h1>
            <Space direction='vertical' size={16}>
                <Space wrap size={16}>
                    <Avatar size={64} icon={<UserOutlined />} />
                    <Avatar size='large' icon={<UserOutlined />} />
                    <Avatar icon={<UserOutlined />} />
                    <Avatar size='small' icon={<UserOutlined />} />
                    <Avatar size={16} icon={<UserOutlined />} />
                </Space>
                <hr />
                <Space size={16} wrap>
                    <Avatar icon={<UserOutlined />} />
                    <Avatar>U</Avatar>
                    <Avatar size={40}>USER</Avatar>
                    <Avatar src={url} />
                    <Avatar src={<img src={url} alt='avatar' />} />
                    <Avatar
                        style={{
                            backgroundColor: "#fde3cf",
                            color: "#f56a00",
                        }}
                    >
                        U
                    </Avatar>
                    <Avatar
                        style={{
                            backgroundColor: "#ff0000",
                        }}
                        icon={<UserOutlined />}
                    />
                </Space>
                <hr />
                <Space size={16} wrap>
                    <Badge count={5}>
                        <Avatar shape='circle' icon={<UserOutlined />} />
                    </Badge>
                    <Badge dot>
                        <Avatar shape='circle' icon={<UserOutlined />} />
                    </Badge>
                </Space>
            </Space>
        </>
    );
};

export default View;
